<template>
    <div id="home">
        <main-stage-one-header></main-stage-one-header>
        <top-menus />
        <div class="main-box bg-color-gray">
            <div class="left-panel lf" :class="{'collapse-left-panel': isCollapseLeftPanel}">
                <left-menus />
            </div>
            <div class="collapse-box lf">
                <!--<div class="collapse-button" @click.prevent="isCollapseLeftPanel = !isCollapseLeftPanel">
                    <i :class="isCollapseLeftPanel ? 'el-icon-arrow-right': 'el-icon-arrow-left'" ></i>
                </div>-->
            </div>
            <div class="main-box-content">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import ajax from '@api/ajax'
import MainStageOneHeader from '../common/mainStageOneHeader'
import topMenus from './comps/topMenus'
import leftMenus from './comps/leftMenus'
export default {
    name: 'AdhocHome',
    components: {
        MainStageOneHeader,
        topMenus,
        leftMenus
    },
    data () {
        return {
            menuLoading: true, // 菜单加载中
            menuData: [],
            num: 0,
            path: '',
            isCollapseLeftPanel: false // 是否折叠左侧菜单面板
        }
    },
    methods: {
        formatToTree (list) {
            // filter会遍历原数组的每一项，因为有children引用的存在，返回值只需要返回第一层数据就可以了
            // 当然，此处也可改用双层for循环
            return list.filter(function (parent) {
                // 遍历原数组的每一项，找出当前项的所有子节点
                let branchArr = list.filter(function (child) {
                    return parent.menuId === child.parentId
                })
                // 为当前项数据追加children引用
                parent.children = branchArr
                return !parent.parentId // 过滤出第一层
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
/* 这个需要写外面, 这种方式估计也这有这里会用上，不怕样式污染 */
.el-menu--vertical
.el-menu
    border-right solid 0
    .el-submenu__title
        height 50px
        line-height 50px
    .el-submenu__title, .el-menu-item
        color gray
        &:hover
            color #FFF
            background-color #f04959
            border-radius 5px
            .iconfont
                color #FFF
            i
                color #fcedf5 !important
    .el-dropdown-menu__item--divided::before,
    .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
    .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
    .el-menu--horizontal > .el-submenu .el-submenu__title:hover
        background-color #f04959
    .el-submenu
        .el-submenu
            .el-submenu__title, .el-menu-item
                color gray
                background-color #F6F6F6
    .el-menu-item
        width 230px
        height 40px
        line-height 40px
    .is-active
        &.el-menu-item
            color #FFF
            background-color #f04959
            border-radius 5px
        .el-submenu__title
            color #f04959
            &:hover
                color #FFF
                i
                    color #FFF
            i
                color #f04959
    .iconfont
        font-size 22px
        margin-right 13px
#home
    height 100%
    width 100%
    min-width 600px
    .main-box
        height 100%
        overflow hidden
        .left-panel
            width 160px
            background-color #FFF
            overflow auto
            height calc(100% - 120px)
            margin-top 20px
            box-shadow 1px 0 7px #e0dddd
            &.collapse-left-panel
                width 60px
                padding-left 7px
                padding-right 7px
        .collapse-box
            height 100%
            width 20px
            display flex
            align-items center
            .collapse-button
                width 10px
                height 80px
                line-height 80px
                overflow hidden
                border-top-right-radius 10px
                border-bottom-right-radius 10px
                color #FFF
                font-weight bold
                background-color #A0A5AD
                cursor pointer
        .main-box-content
            overflow-y scroll
            height calc(100% - 120px)
            margin-top 20px
            position relative;
            .el-input
                .el-input__inner
                    font-size 12px
</style>
